var tbodys = []
var tb = document.querySelector("tbody")
var pageSize = 7; //每页显示的记录条数
var page = 1; //当前页，默认第一页
// 班级列表接口
let classdatas = {
    pageIndex: page,
    pageSize: pageSize
}
ajaxHttp('POST', "clazz/selectClazz", classdatas).then((res) => {
    res = JSON.parse(res)
    // console.log(res);
    var data = res.dataset.selectClazz
    // console.log(data);
    tbodys = data
    // console.log(tbodys);
    for (var i = 0; i < tbodys.length; i++) {
        // console.log(tbodys[i].clazzId);
        var tr = document.createElement("tr")
        tr.className = "trs"
        tr.innerHTML = `
            <td class="clazzid">${i + 1}</td>
            <td>${tbodys[i].clazzName}</td>
            <td>${tbodys[i].clazzNowNum}</td>
            <td>${tbodys[i].startTime}</td>
            <td>${tbodys[i].endTime}</td>
            <td>${tbodys[i].clazzLeader}</td>
            <td class="state">${tbodys[i].clazzStatus}</td>
            <td class="operate">
                <button class="revise" onclick="revise(this,${tbodys[i].clazzId})" style="color:#12AD79;">修改</button>
                <button onclick="students(${tbodys[i].clazzId})" style="color:#2B6FDF;">详情</button>
                <button onclick="dele(${tbodys[i].clazzId})" style="color:red;">删除</button>
            </td>
        `
        tb.appendChild(tr)
    }
})


// 搜索列表
function serch() {
    var names = document.querySelector("#classnames").value
    // console.log(names);
    var sertdate = document.querySelector("#sertdate").value
    // console.log(sertdate);
    var enddate = document.querySelector("#enddate").value
    let search = {
        pageIndex: page,
        pageSize: pageSize,
    }
    ajaxHttp("post", "clazz/selectClazz", search).then((res) => {
        res = JSON.parse(res)
        var data = res.dataset.selectClazz
        tbodys = data
        for (var i = 0; i < tbodys.length; i++) {
            if (names === tbodys[i].clazzName) {
               for(var j=0;j<tbodys.length;j++){
                tb.innerHTML = ""
                var tr = document.createElement("tr")
                tr.className = "trs"
                tr.innerHTML = `
                <td class="clazzid">${i + 1}</td>
                   <td>${tbodys[i].clazzName}</td>
                   <td>${tbodys[i].clazzNowNum}</td>
                   <td>${tbodys[i].startTime}</td>
                   <td>${tbodys[i].endTime}</td>
                   <td>${tbodys[i].clazzLeader}</td>
                   <td class="state">${tbodys[i].clazzStatus}</td>
                   <td class="operate">
                   <button class="revise" onclick="revise(this,${tbodys[i].clazzId})" style="color:#12AD79;">修改</button>
                   <button onclick="students(${tbodys[i].clazzId})" style="color:#2B6FDF;">详情</button>
                   <button onclick="dele()" style="color:red;">删除</button>
               </td>
               `
                tb.appendChild(tr)
               }
            } else if (tbodys[i].startTime === sertdate) {
                tb.innerHTML = ""
                for(var j=0;j<tbodys.length;j++){
                    tb.innerHTML = ""
                    var tr = document.createElement("tr")
                    tr.className = "trs"
                    tr.innerHTML = `
                    <td class="clazzid">${i + 1}</td>
                       <td>${tbodys[i].clazzName}</td>
                       <td>${tbodys[i].clazzNowNum}</td>
                       <td>${tbodys[i].startTime}</td>
                       <td>${tbodys[i].endTime}</td>
                       <td>${tbodys[i].clazzLeader}</td>
                       <td class="state">${tbodys[i].clazzStatus}</td>
                       <td class="operate">
                       <button class="revise" onclick="revise(this,${tbodys[i].clazzId})" style="color:#12AD79;">修改</button>
                       <button onclick="students(${tbodys[i].clazzId})" style="color:#2B6FDF;">详情</button>
                       <button onclick="dele()" style="color:red;">删除</button>
                   </td>
                   `
                    tb.appendChild(tr)
                }
            } else if (sertdate === "" && names === "" && enddate == "") {
                tb.innerHTML = ""
                for(var j=0;j<tbodys.length;j++){
                    tb.innerHTML = ""
                    var tr = document.createElement("tr")
                    tr.className = "trs"
                    tr.innerHTML = `
                    <td class="clazzid">${i + 1}</td>
                       <td>${tbodys[i].clazzName}</td>
                       <td>${tbodys[i].clazzNowNum}</td>
                       <td>${tbodys[i].startTime}</td>
                       <td>${tbodys[i].endTime}</td>
                       <td>${tbodys[i].clazzLeader}</td>
                       <td class="state">${tbodys[i].clazzStatus}</td>
                       <td class="operate">
                       <button class="revise" onclick="revise(this,${tbodys[i].clazzId})" style="color:#12AD79;">修改</button>
                       <button onclick="students(${tbodys[i].clazzId})" style="color:#2B6FDF;">详情</button>
                       <button onclick="dele()" style="color:red;">删除</button>
                   </td>
                   `
                    tb.appendChild(tr)
                }
            }

        }

        // console.log(tbodys);

    })
}
// 负责人下拉框
function users() {
    var select = document.querySelector("#sele")
    // console.log(sele);
    ajaxHttp("post", "clazz/clazzLeader").then((res) => {
        // console.log(res);
        res = JSON.parse(res)
        // console.log(res);
        var data = res.dataset
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            var newsele = document.createElement("option")
            newsele.innerHTML = `${data[i].clazzLeader}`
            newsele.value = i
            select.appendChild(newsele)
        }
    })
    // console.log(res);
}
users()
// 班级下拉框
function classname() {
    var clasele = document.querySelector("#clasele")
    ajaxHttp("post", "clazz/clazzBox").then((res) => {
        // console.log(res);
        res = JSON.parse(res)
        // console.log(res);
        var data = res.dataset
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            var newsele = document.createElement("option")
            newsele.innerHTML = `${data[i].clazzName}`
            newsele.value = i
            clasele.appendChild(newsele)
        }
    })
}
// 删除班级接口
function delclass() {
    var num = localStorage.getItem("clazzid")
    // console.log(num);
    var clanum = Number(num)
    // console.log(typeof(clanum));
    var claid = {
        clazzId: clanum,
    }
    ajaxHttp("POST", "clazz/deleteClazz", claid).then((res) => {
        // console.log(res);
        alert("删除成功")
        offdel()
        location.reload()
    })
}

var del = document.querySelector(".del")
function dele(claid) {
    // console.log(claid);
    del.style.display = "flex"
    localStorage.setItem("clazzid", claid)
}
// 关闭删除遮罩
function offdel() {
    del.style.display = "none"
}



// 跳转班级详情

// 班级的人接口
function clazznum() {
    var index = localStorage.getItem("clazzid")
    var clazzid = Number(index)
    let nums = {
        pageIndex: page,
        pageSize: pageSize,
        fileClazz: clazzid
    }
    ajaxHttp("Post", "clazz/clazzDetails", nums).then((res) => {
        // console.log(res);
        res = JSON.parse(res)
        console.log(res);
    })
}
function students(stud) {
    localStorage.setItem("clazzid", stud)
    clazznum()
    window.location.href = "students.html"
}


// 添加班级列表
var addopen = document.querySelector(".addopen")
// 打开
function openadd() {
    addopen.style.display = "flex"
}
// 添加班级接口
function addclass() {

    var clazz = document.querySelector("#class").value
    var classuser = document.querySelector(".classuser").value
    var classdate = document.querySelector(".classdate").value
    var endtime = document.querySelector(".endtime").value
    let addClazz = {
        
        clazzName: clazz,
        startTime: classdate,
        endTime: endtime,
        clazzLeader: classuser

    }
    if (clazz != "" && classuser != "" && classdate != "" && endtime != "") {
        ajaxHttp("post", "clazz/addClazz", addClazz).then((res) => {
            // console.log(res);
            alert("添加成功")
            offopen()
            location.reload();
        })
    } else {
        alert("班级名称或者班级负责人或者开始时间或者结束时间不能为空")
    }
}
// 关闭添加班级信息
function offopen() {
    addopen.style.display = "none"
}




var opens = document.querySelector(".open")
// 单击修改打开修改弹窗
var names = document.querySelector(".name")
var user = document.querySelector(".user")
var settime = document.querySelector(".settime")
var endtime = document.querySelector("#endtime");
function revise(revis, clazzids) {
    console.log(clazzids);
    var parent = revis.parentNode.parentNode
    var clazzid = parent.querySelector(".clazzid")
    var num = parseInt(clazzid.innerText)
    var tbos = this.tbodys;
    console.log(tbos);
    opens.style.display = "flex"
    for (var i = 0; i < tbos.length; i++) {
        // tbody所有的id
        if (num === tbos[i].clazzId) {
            // console.log(1);
            names.value = tbos[i].clazzName
            user.value = tbos[i].clazzLeader
            settime.value = tbos[i].startTime
            endtime.value = tbos[i].endTime
            // console.log(names.value);
        }
    }
    localStorage.setItem("clazzid", clazzids)
}
function update() {
    var namea=document.querySelector(".name").value
    var index = localStorage.getItem("clazzid")
    // console.log(index);
    let uclazz = {
        clazzName:namea,
        clazzId: index,
        startTime: settime.value,
        endTime: endtime.value,
        clazzLeader: user.value
    }
    ajaxHttp("POST", "clazz/updateClazz", uclazz).then((res) => {
        // console.log(res);
        alert("修改成功")
        offrev()
        location.reload()
    })
}
// 单击修改取消关闭遮罩
function offrev() {
    opens.style.display = "none"
}

// 判断是否是已开班或者是已结课
function state() {
    var state = document.querySelectorAll(".state")
    for (var i = 0; i < state.length; i++) {
        if (state[i].innerText == "已开班") {
            state[i].style.color = "#30B888"
        } else if (state[i].innerText == "已结课") {
            state[i].style.color = "#E44E5C"
        }
    }
}
state()

// 分页
var theUL = document.getElementById("pageListTableBody");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum"); //获取当前页<span>
var spanPre = document.getElementById("spanPre"); //获取上一页<span>
var spanNext = document.getElementById("spanNext"); //获取下一页<span>
var spanFirst = document.getElementById("spanFirst"); //获取第一页<span>
var spanLast = document.getElementById("spanLast"); //获取最后一页<span>
var numberRowsInTable = theUL.getElementsByTagName("tr").length; //记录总条数
var pageSize = 4; //每页显示的记录条数
var page = 1; //当前页，默认第一页

//下一页
function next() {
    hideTable();
    currentRow = pageSize * page;
    maxRow = currentRow + pageSize;
    if (maxRow > numberRowsInTable) maxRow = numberRowsInTable;
    for (var i = currentRow; i < maxRow; i++) {
        theUL.getElementsByTagName("tr")[i].style.display = '';
    }
    page++;
    if (maxRow == numberRowsInTable) {
        nextText();
        lastText();
    }
    showPage();
    preLink();
    firstLink();
}

//上一页
function pre() {
    hideTable();
    page--;
    currentRow = pageSize * page;
    maxRow = currentRow - pageSize;
    if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
    for (var i = maxRow; i < currentRow; i++) {
        theUL.getElementsByTagName("tr")[i].style.display = '';
    }
    if (maxRow == 0) {
        preText();
        firstText();
    }
    showPage();
    nextLink();
    lastLink();
}

//第一页
function first() {
    hideTable();
    page = 1;
    for (var i = 0; i < pageSize; i++) {
        theUL.getElementsByTagName("tr")[i].style.display = '';
    }
    showPage();
    firstText();
    preText();
    nextLink();
    lastLink();
}

//最后一页
function last() {
    hideTable();
    page = pageCount();
    currentRow = pageSize * (page - 1);
    for (var i = currentRow; i < numberRowsInTable; i++) {
        theUL.getElementsByTagName("tr")[i].style.display = '';
    }
    showPage();
    preLink();
    nextText();
    firstLink();
    lastText();
}

function hideTable() {
    for (var i = 0; i < numberRowsInTable; i++) {
        theUL.getElementsByTagName("tr")[i].style.display = 'none';
    }
}

function showPage() {
    pageNum.innerHTML = page;
}

//总共页数
function pageCount() {
    return Math.ceil(numberRowsInTable / pageSize);
}
//显示链接
function preLink() {
    spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>";
}
function preText() {
    spanPre.innerHTML = "上一页";
}
function nextLink() {
    spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";
}
function nextText() {
    spanNext.innerHTML = "下一页";
}
function firstLink() {
    spanFirst.innerHTML = "<a href='javascript:first();'>首页</a>";
}
function firstText() {
    spanFirst.innerHTML = "首页";
}
function lastLink() {
    spanLast.innerHTML = "<a href='javascript:last();'>末页</a>";
}
function lastText() {
    spanLast.innerHTML = "末页";
}
//隐藏
function hide() {
    for (var i = pageSize; i < numberRowsInTable; i++) {
        theUL.getElementsByTagName("tr")[i].style.display = 'none';
    }
    totalPage.innerHTML = pageCount();
    pageNum.innerHTML = '1';
    nextLink();
    lastLink();
}
hide();